<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>carousel模块快速使用</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <script src="../layui/layui.js"></script>
  <style type="text/css">
  	*{margin: 0;padding: 0;}
  	#test1 img {
    width: 70%;
    height: 100%;
	}
	.layuibody{
		width: 80%;
		margin:40px auto;
	}
	.layui-row .left{
		float: left;
	}
	.layui-row .right{
		background:url(../img/act/bg.jpg) ;
		height: 400px;
		width: 30%;
		float: left;
	}
	
	.right li{
		margin: 20px 15px;
	}
	.right li:nth-of-type(1){
		font-size: 20px;
		font-weight: bolder;
	}
	.right li:nth-of-type(2){
		font-size: 12px;
	}
	.right li:nth-of-type(3){
		font-size: 14px;
		text-indent: 2em;
		line-height: 24px;
	}
	#test1{
		margin-bottom: 20px;
	}
	.row-left,.row-right{
		width: 50%;
		height: 300px;
		float: left;
	}
	.layui-elem-quote a{
		font-size: 12px;
		color: #1E9FFF;
	}
	.layui-elem-quote{
		border-left-color: #1E9FFF;
	}
	.layui-card-header{
		font-size: 18px;
	}
	.row-left img{
		width: 100%;
		height: 100%;
	}
	.row-right img{
		width: 100%;
		height: 100%;
	}
	/*.layui-row button{
		height:35px;
		width: 90px;
		border-radius: 10px;
	}*/
	.layui-row button:nth-of-type(1){
		margin-left: 10%;
	}
	.layui-row button:nth-of-type(2){
		float: right;
		margin-right: 10%;
	}
	.layui-icon-tianjia:before,.layui-icon-biaodan:before{
		margin-right: 5px;
	}
	.ass{
		padding: 0 2%;
		background: transparent;
		width: 19%;
		height: 270px;
		float: left;
		margin: 0 0.5%;
		border:1px solid grey;
	}
	.ass-img img{
		width: 100%;
		height: 100%;
	}
	.ass-img{
		border: 1px solid grey;
		border-radius: 50%;
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	legend{
		width: 40%;
		height: 30%;
		padding: 0;
		margin: 0;
	}
	.layui-icon-youyou:before{
		float: right;
	}
	.layui-field-box a{
		float: right;
		text-decoration: underline;
		color: #1E9FFF;
	}
  </style>
</head>
<body>
<div class="layuibody">
	<div class="layui-carousel" id="test1">
		<div carousel-item>
		   <div class="layui-row">
		   		<img src="../img/1.jpg" class="left">
		   		<div class="right">
		   			<ul>
		   				<li>重温时代风云，感悟沧桑历史</li>
		   				<li>——我校考古学社参观新郑门遗址与校文物馆活动成功举办</li>
		   				<li>12月9日，我校考古学社参观新郑门遗址与校文物馆活动顺利开展。
		   				本次活动由共青团河南大学历史文化学院委员会主办，由考古学社承办，
		   				考古学社部分会员参与本次活动。</li>
		   			</ul>
		   		</div>
		   </div>
		   <div class="layui-row">
		   		<img src="../img/2.jpg" class="left">
		   		<div class="right">
		   			<ul>
		   				<li>情寄纸笔，翰墨生香</li>
		   				<li>——我校书法协会年中笔会成功举办</li>
		   				<li>文人荟萃，笔墨友之。5月3日下午，我校书法协会年中笔会于
		   					校医院对面完德府三楼成功举办。本次活动由共青团河南大学委员会、
		   					共青团历史文化学院委员会主办，书法协会承办。</li>
		   			</ul>
		   		</div>
		   </div>
		   <div class="layui-row">
		   		<img src="../img/3.jpg" class="left">
		   		<div class="right">
		   			<ul>
		   				<li>寒秋经暮晚，清风自蓬莱</li>
		   				<li>——我校清风剧团汇报晚会成功举办</li>
		   				<li>12月10晚，清风剧团2017年汇报晚会于我校明伦
		   					校区教职工活动中心演出厅成功举办。我校学生汇聚一堂，共享青春盛宴。
   							在主持人报幕之后，晚会在歌曲《安眠药》轻柔的曲调中开场，观众们安静地闭目聆听，沉醉其中
    						。舞台剧是清风剧团的特色节目，也是晚会的重头大戏。</li>
		   			</ul>
		   		</div>
		   </div>
		   <div class="layui-row">
		   		<img src="../img/4.jpg" class="left">
		   		<div class="right">
		   			<ul>
		   				<li>旧岁海棠娇，新来桃李妖</li>
		   				<li>——我校宋韵诗文学社召开年度总结大会顺利召开</li>
		   				<li>12月28日下午，宋韵诗文学社年度上学年总结大会于我
		   					校明伦校区图书馆六楼教室成功举行。宋韵诗文学社会长杨旭，
		   					副会长吴威志、邵建东、黄晓芳、刘杨，
		   					内务与联络中心主任朱豪杰，读书交流中心主任李云直以及
		   					部分社员出席本次会议。</li>
		   			</ul>
		   		</div>
		   </div>
		    <div class="layui-row">
		   		<img src="../img/5.jpg" class="left">
		   		<div class="right">
		   			<ul>
		   				<li>书评学社，迎新晚会</li>
		   				<li>——我校书评学社2017年迎新晚会成功举办</li>
		   				<li>12月3日晚，书评学社2017年迎新晚会于我校明伦
		   					校区教职工活动中心成功举办。书评学社会长陆潇，副会
		   					长蔡国琦、徐子阳以及社内成员参与本次活动，并邀请旅
		   					游协会、国学研究会等其他友好协会代表参加本次晚会。
		   					陆昊宇、党婉婷、王涵怡、王宁博担任主持。</li>
		   			</ul>
		   		</div>
		   </div>
		</div>
	</div>
	<div class="layui-row" style="margin-bottom: 20px;">
		<blockquote class="layui-elem-quote">热门活动<a href="#" style="float: right;" class="layui-icon layui-icon-youyou"></a></blockquote>
		<div class="layui-row">
			<div class="row-left">
				<img src="../img/act/1.jpeg" />
			</div>
			<div class="layui-card row-right">
				<div class="layui-card-header">巧手杯之大国工匠——DIY手工社</div>
				<div class="layui-card-body">
					<ul>
						<li>活动时间：2018-12-1 - 2018-12-8</li>
						<li>活动地点：下沉广场</li>
						<li>活动介绍：弘扬和传承大国工匠精神，提高学生对文化艺术品的鉴赏能力，特举办 “第二届巧手杯——大国工匠”比赛，为爱好手工的同学提供了一个展示自我的平台...</li>
					</ul>
					<div class="layui-row" style="margin-top: 20px;">	
					</div>
				</div>
			</div>
		</div>
		<div class="layui-row">
			<div class="row-left">
				<div class="layui-card-header">翰墨书香读书月——安财读书会</div>
				<div class="layui-card-body">
					<ul>
						<li>活动时间：2018-11-1 - 2018-12-1</li>
						<li>活动地点：图书馆1楼</li>
						<li>活动介绍：本届“读书月”活动以“畅游书海，书香安财”为主题，引导全体师生养成“爱读书、勤动笔”的习惯，在全体师生中普遍树立起终身阅读、全员阅读的新理念，通过各种形式的学习，在校园形成读写结合的良好氛围...</li>
					</ul>
					<div class="layui-row" style="margin-top: 20px;">	
					</div>
				</div>
			</div>
			<div class="layui-card row-right">
				<img src="../img/act/2.jpeg" />
			</div>
		</div>
		<div class="layui-row">
			<div class="row-left">
				<img src="../img/act/3.jpeg" />
			</div>
			<div class="layui-card row-right">
				<div class="layui-card-header">辩论之星——辩论协会</div>
				<div class="layui-card-body">
					<ul>
						<li>活动时间：2018-12-1 - 2018-12-8</li>
						<li>活动地点：综合教学楼6305</li>
						<li>活动介绍：思、辩二字自古是人类精神生活的主题，不论是先秦诸子百家的争鸣，还是古希腊雅典先哲对生命的追问与思考，无不是利用思辨上下求索.而处于新时代的我们，面对汹涌而来的观念与思想的碰撞也应该有自己辨析的能力...</li>
					</ul>
					<div class="layui-row" style="margin-top: 20px;">	
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="layui-row">
		<blockquote class="layui-elem-quote">火爆社团<a href="#" style="float: right;" class="layui-icon layui-icon-youyou"></a></blockquote>
		<div class="layui-row" >
		<fieldset class="layui-elem-field ass">
		  <legend><div class="ass-img"><img src="../img/ass/动漫.jpg"></div></legend>
		  <div class="layui-field-box">
		   	<h4></h4>社团名称：触角动漫社
				<h6>挂靠单位：河南大学艺术学院</h6>
				<p>成立时间：2000年</p>
				<p>精品活动：大型动漫舞台剧比赛、动漫放映会</p>
				<p>会员人数：350人</p>
				<br />	
		  </div>
		</fieldset>
		<fieldset class="layui-elem-field ass">
		  <legend><div class="ass-img"><img src="../img/ass/辩协.jpg"></div></legend>
		  <div class="layui-field-box">
		   	<h4></h4>社团名称：辩论协会
				<h6>挂靠单位：河南大学法学院</h6>
				<p>成立时间：2011年</p>
				<p>精品活动：辩论赛、模拟面试大赛</p>
				<p>会员人数：300人</p>
				<br /><br />	
		  </div>
		</fieldset>
		<fieldset class="layui-elem-field ass">
		  <legend><div class="ass-img"><img src="../img/ass/爱心.jpg"></div></legend>
		  <div class="layui-field-box">
		   	<h4></h4>社团名称：爱心俱乐部
				<h6>挂靠单位：河南大学文学院</h6>
				<p>成立时间：2001年</p>
				<p>精品活动：回收军训服，养老院志愿活动</p>
				<p>会员人数：100人</p>
				<br /><br />
		  </div>
		</fieldset>
		<fieldset class="layui-elem-field ass">
		  <legend><div class="ass-img"><img src="../img/ass/演讲.png"></div></legend>
		  <div class="layui-field-box">
		   	<h4>社团名称：NGU演讲与表达协会</h4>
				<h6>挂靠单位：河南大学公共体育教研部</h6>
				<p>成立时间：2014年</p>
				<p>精品活动：五四主题演讲、演讲训练营</p>
				<p>会员人数：65人</p>	
		  </div>
		</fieldset>
	</div>
</div>
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height:'400px'
    ,arrow: 'always' //始终显示箭头
   ,indicator:'inside'
  });
});
</script>
</body>
</html>